These widgets are used to provide a layout for placing other widgets.
In [1]:
{-# LANGUAGE OverloadedStrings #-}
import IHaskell.Display.Widgets
These widgets have a Children field, which accepts a [ChildWidget]. A ChildWidget can be created using the ChildWidget constructor.
In [2]:
:t ChildWidget
In [3]:
-- Create new Box and FlexBox
box <- mkBox
flx <- mkFlexBox
By default, boxes have a horizontal orientation. Thus adding some widgets to them lays them out horizontally.
In [4]:
import Control.Monad (replicateM)
-- Make some buttons
buttons <- replicateM 20 mkButton
-- Add children widgets to boxes
let children = map ChildWidget buttons
setField box Children children
setField flx Children children
-- Display boxes
box
flx
You might be thinking that there is no difference between Box and FlexBox, but that's not true.
Following are some differences:
Box is always horizontal, whereas FlexBox has a configurable Orientation.FlexBox is flexible, and the flexibility is determined by its Flex field (0 to 2).FlexBox also has explicit Pack and Align fields.Let's see these differences in action:
In [5]:
-- Trying to set orientation for Boxes
setField box Orientation VerticalOrientation
The error means that the widget doesn't possess the Orientation property.
In [6]:
-- Trying to set orientation for FlexBox
setField flx Orientation VerticalOrientation
These widgets are useful for displaying a variety of content in a small amount of space.
In [7]:
acc <- mkAccordion
tab <- mkTabWidget
Let's add some children and see what the result looks like.
In [8]:
buttons' <- replicateM 5 mkButton
let children = map ChildWidget buttons'
setField acc Children children
setField tab Children children
acc
tab
Both the widgets are similar, the only major difference is in the orientation. Accordion is vertical, whereas TabWidget is horizontal.